<!-- 机构端-我的-申请内训 -->
<template>
	<view class="container">
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>
		
		<!-- 头部-申请记录 -->
		<view class="recod-container">
			<view class="recod-one">
				 <view class="first">内训说明</view>
				 <view class="second" @click="trainingRecord">申请记录</view>
			</view>
			<view class="recod-two">
				 <view class="">提交申请后，项目经理人会联系并沟通具体的安排</view>
			</view>			
		</view>
		<view class="gap-container">
			<u-gap height="30" bg-color="#F2F2F2" :margin-bottom="0"></u-gap>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">
				<u-field v-model="form.trainingTheme" label="培训主题：" label-width="160" prop="companyName" placeholder="请选择培训主题" :required="true"
					:placeholder-style="placeholderStyle" @click="isShowPicker(0)">
				</u-field>
				<u-field v-model="form.participationNumber" label="参与人数：" label-width="160" prop="companyName" placeholder="请输入参与人数"
					:placeholder-style="placeholderStyle">
				</u-field>
				<!-- 企业介绍 -->
				<view class="introduction">
					<view class="header">
						<text class="title">需求说明：</text>
					</view>
					<view class="textarea-container">
						<u-input v-model="form.description" type="textarea" placeholder="请输入需求说明" height="300" maxlength="1000"
							@input="handleInput" :clearable="clearable" />
						<view class="word-count">
							{{ currentCount }}/1000
						</view>
					</view>
				</view>

				<!-- 联系人姓名 -->
				<u-field v-model="form.contactName" label="联系人姓名：" label-width="180" placeholder="请输入联系人姓名"  :required="true"
					:placeholder-style="placeholderStyle">
				</u-field>
				<!-- 手机号 -->
				<u-field v-model="form.contactIphone" label="手机号：" label-width="180" placeholder="请输入联系人姓名" :required="true"
					:placeholder-style="placeholderStyle">
				</u-field>
				<!-- 联系微信 -->
				<u-field v-model="form.contactWx" label="联系微信：" label-width="180" placeholder="请输入联系人姓名" :required="true"
					:placeholder-style="placeholderStyle">
				</u-field>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
<!-- 				<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
					上一步
				</u-button> -->
				<u-button type="primary" @click="handleSubmit" shape="circle" :loading="loading" :custom-style="btuStyle">
					提交
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				loading: false,
				clearable: false,
				doorPhotos: [],
				// 弹出窗口内容
				show: false,
				mode: "selector",
				range: ['有限责任公司', '股份有限公司', '个体工商户', '其他'],
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx'
				},
				form: {
					trainingTheme: '', //培训主题
					participationNumber: 0,   //参与人数					
					description: '', // 需求说明
					contactName: '', ///联系人姓名
					contactIphone: '' ,///手机号
					contactWx: '' ////联系人微信	
				},
				
				currentCount: 0,  //当前字数
				maxCount: 1000,  //最大字数
				trainTitle: [] , //培训主题
 				// 验证
				rules: {
					trainingTheme: [{
						required: true,
						message: '请输入培训主题',
						trigger: 'blur'
					}]
				}
			}
		},
		onShow() {
			// 获取字典根项
			this.selectdictNode()
		},
		methods: {
			selectdictNode() {
				this.$u.api.querydict({
					"dictcode": "0"
				}).then(res => {
					console.log('根项字典',res)
					this.dictNode = res.data.base_info
					this.selectItem()
				})
			},
			// 查询字典项
			async selectItem() {
				// 查询岗位名称
				this.tmpItem = {} 
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '培训主题')
				let returnItemjobName = []
				returnItemjobName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobName.length; i++) {
					this.trainTitle.push(returnItemjobName[i].dict_name)
				}
				console.log('tmpItem-1:', this.jobName);
							
			},
			// 查询字典项
			selectItemApi(itemcode,backcall) {
				return this.$u.api.querydict({
					"dictcode": itemcode
				}).then(res => res.data.base_info)	
			},
			// 加载字典结束

			// 显示经营类型弹窗
			isShowPicker(value) {
				if (value == 0) {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = this.trainTitle;
					this.defaultSelector = [0];
				} else if (value == 1) {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = ['营业中', '暂停营业'];
					this.defaultSelector = [0];
				} else {
					this.NumberValue = value;
					this.mode = "region"
					// this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
					// this.defaultSelector = [0, 0, 0];
				}
				this.show = true
			},

			// 计算企业介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.form.description.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.form.description = this.form.description.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},

			// 选择确认
			confirm(e) {
				if (this.NumberValue == 0) {
					this.form.trainingTheme = this.range[e[0]];
				} else if (this.NumberValue == 1) {
					this.form.businessStatus = this.range[e[0]];
				} else {
					this.form.businessAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},

			// 经营类型选择
			confirmBusinessType(e) {
				this.form.businessType = e.value[0].label;
				this.showBusinessTypePicker = false;
			},

			// 地址选择
			confirmAddress(e) {
				const [province, city, district] = e.value;
				this.form.businessAddress = `${province.name}-${city.name}-${district.name}`;
				this.showAddressPicker = false;
			},
			
			// 内训记录
			trainingRecord() {
				uni.navigateTo({
					url: '/pages/Institution/training/trainingrecord'
				});
			},

			// 提交
			handleSubmit() {
				this.$u.api.createjgnx({
					"usercode": uni.getStorageSync('usercode'), ///#用户编号
					"jgnxname": this.form.trainingTheme,///#机构内训名称
					"jgnxjoinnums": this.form.participationNumber,///#机构内训人数
					"jgnxdesc": this.form.description,////#机构内训描述
					"jgnxusername": this.form.contactName,///#机构内训联系人
					"jgnxphoneno": this.form.contactIphone,////#机构内训联系电话
					"jgnxwxid": this.form.contactWx,////#机构内训微信
				}).then(res => {
					console.log('内训：', res)
					
				})
				
				
				
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;
				// 	this.loading = true;
				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.showToast({
				// 			title: '提交成功',
				// 			icon: 'success',
				// 			complete: () => {
				// 				uni.navigateTo({
				// 					url: '/pages/register/register-finish'
				// 				});
				// 			}
				// 		});
				// 	}, 1500);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 0rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}
		
		.recod-container {
			padding: 20rpx 40rpx;
			border-radius: 12rpx;
			
			.recod-one {
				display: flex;
				justify-content: space-between;  ///同一行相等距离，两边
				margin-bottom: 10px;
				font-size: 16px;
				
				.second {
					color: #009f9f
				}
			}
			
		}

    .gap-container {
			margin: 0;
			padding: 0;
		}

		.form-container {
			background: #fff;
			padding: 10rpx 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}

			.upload-section {
				margin-bottom: 40rpx;

				.upload-title {
					font-size: 28rpx;
					color: #606266;
					margin-bottom: 16rpx;
					display: block;

					// .required {
					// 	color: #f56c6c;
					// }
				}

				.upload-desc {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>